export interface MapTilesStyles {
  id: string | number
  name: string
  title: string
  image: string
  scl?: number
  style?: number
}

// 地图类型
export interface MapTypes {
  id: string | number
  name: string
  title: string
  image: string
  tileStyle: { [key: number]: MapTilesStyles }
}

export const key: string = '94290a9f9067282c5d19a8a755356cdb'

/**
 * 地图底图瓦片
 */
export const mapTypesStyles: { [key: number]: MapTypes } = {
  1: {
    id: 1,
    name: '高德',
    title: '高德地图',
    image: 'gaodeicon.png',
    tileStyle: {
      1: {
        id: 1,
        name: '矢量底图',
        title: '矢量底图(含路网不含注记)',
        image: 'gaode-vector-unmark.png',
        scl: 2,
        style: 7,
      },
      2: {
        id: 2,
        name: '矢量底图',
        title: '矢量底图(含路网和注记)',
        image: 'gaode-vector-mark.png',
        scl: 1,
        style: 7,
      },
      3: {
        id: 3,
        name: '影像底图',
        title: '影像图(不含路网不含注记)',
        image: 'gaode-img.png',
        scl: 1,
        style: 6,
      },
      4: {
        id: 4,
        name: '影像路网',
        title: '影像路网(含路网不含注记)',
        image: 'gaode-road-unmark.png',
        scl: 2,
        style: 8,
      },
      5: {
        id: 5,
        name: '影像路网',
        title: '影像路网(含路网含注记)',
        image: 'gaode-road-mark.png',
        scl: 1,
        style: 8,
      },
    },
  },
}

/**
 * 高德地图底图瓦片
 * @param scl
 * @param style
 */
export function getMapTilesByStyle(scl: number = 2, style: number = 7): any {
  return {
    version: 8, // 设置版本号
    glyphs: '/fonts/{fontstack}/{range}.pbf', // 设置字体图标
    sources: {
      gaode: {
        type: 'raster',
        tiles: [
          // wprd0{1-4}
          // scl=1&style=7 为矢量图（含路网和注记）
          // scl=2&style=7 为矢量图（含路网但不含注记）
          // scl=1&style=6 为影像底图（不含路网，不含注记）
          // scl=2&style=6 为影像底图（不含路网、不含注记）
          // scl=1&style=8 为影像路图（含路网，含注记）
          // scl=2&style=8 为影像路网（含路网，不含注记）
          `//wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=${scl}&style=${style}`,
          `//wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=${scl}&style=${style}`,
          `//wprd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=${scl}&style=${style}`,
          `//wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=${scl}&style=${style}`,
        ],
        tileSize: 256,
      },
    },
    // 设置加载并显示来源的图层信息
    layers: [
      {
        id: 'gaode-tiles', // 图层id，要保证唯一性
        type: 'raster', // 图层类型
        source: 'gaode', // 连接图层来源
        minzoom: 1.5, // 图层最小缩放级数
        maxzoom: 19, // 图层最大缩放级数
      },
    ],
  }
}

/**
 * 地图底图瓦片
 * @param mapType 地图类型 1-高德
 * @param tileStyle 地图瓦片样式
 */
export function getMapTilesByMapTypeAndStyle(
  mapType: number = 1,
  tileStyle: number = 1
): any {
  if (mapType === 1) {
    const { scl, style } = mapTypesStyles[mapType].tileStyle[tileStyle]
    return getMapTilesByStyle(scl, style)
  }
  const { scl, style } = mapTypesStyles[mapType].tileStyle[tileStyle]
  return getMapTilesByStyle(scl, style)
}
